import React from 'react'
import { Collapse } from 'antd';
import Topbar from '../../components/Topbar/Topbar';

import './Express.css'

const { Panel } = Collapse;

class Express extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            tips: [],
            rol:this.props.location.state.rol,
            col:this.props.location.state.col
        };
    }

    componentDidMount() {
        //获取表白小技巧
        const url=`https://www.prebeauty.work/${this.state.rol}`
        fetch(url,{
            method:'GET',
            headers:{
                'content-type': 'application/json'
            }
        }).then((res)=>{
            if(res.status===200){
                res.json().then( (data)=> {
                    this.setState({
                        tips:data
                    })
                    
                })
            }else {
                alert("出现一个问题");
            }
        })
    }

    render() {
        const name=this.state.rol=='express'
                    ?'表白小技巧'
                    :this.state.rol=='appointment'
                        ?'约会小tips'
                        :this.state.rol=='notsingle'
                            ?'脱单小建议'
                            :'恋爱小烦恼'
        return (
            <div className="Express" style={{height:window.screen.height,width:window.screen.width}}>
                {/* topbar */}
                <Topbar name={name} color={this.state.col} />

                {/* 表白小技巧 */}
                <Collapse accordion defaultActiveKey={['1']}>
                     {
                        this.state.tips.map(tip =>{
                            const text = (
                                <p style={{ paddingLeft: 24 ,fontSize:14}}>
                                  {tip.content}
                                </p>
                              );
                            return(
                                <Panel header={tip.title} key={tip.id}
                                    style={{
                                        backgroundColor:tip.color,
                                        width:'95%',
                                        borderRadius:10,
                                        margin:'auto',
                                        marginTop:5,
                                        padding:5,
                                        lineHeight:1.5,
                                        fontSize:17
                                    }}
                                ><p>{text}</p></Panel>        
                            )
                        })
                    }
                </Collapse>
            </div>
        )
    }
}

export default Express